<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <link rel="stylesheet" type="text/css" href="../../c-asserts/mui/css/mui.min.css" />
    <link rel="stylesheet" type="text/css" href="../../c-asserts/sui/sui1.0.1.css" />
    <style type="text/css">
        .content-box{
            margin:10px 0;
        }
        .review-ster{
            position:relative;
        }
        .review-ster:after{
            content:'';
            height:0;
            clear:both;
        }
        .star-item{
            width:20%;
            float:left;
            padding:0 1px 4px 1px;
        }
        .star-box{
            background-color:#FFFFFF;
            text-align:center;
        }

        .star-box span{
            color:#666666;
            font-size:15px;
            display:block;
            text-align:center;
            padding:5px 0;
        }

        .star-box .review{
            height:50px;
            background-repeat:no-repeat;
            background-position:center top;
            background-size:45px 45px;
        }
        .review1.on{background-image:url(../../c-image/review/review1_on.png)}
        .review1.off{background-image:url(../../c-image/review/review1_off.png)}
        .review2.on{background-image:url(../../c-image/review/review2_on.png)}
        .review2.off{background-image:url(../../c-image/review/review2_off.png)}
        .review3.on{background-image:url(../../c-image/review/review3_on.png)}
        .review3.off{background-image:url(../../c-image/review/review3_off.png)}
        .review4.on{background-image:url(../../c-image/review/review4_on.png)}
        .review4.off{background-image:url(../../c-image/review/review4_off.png)}
        .review5.on{background-image:url(../../c-image/review/review5_on.png)}
        .review5.off{background-image:url(../../c-image/review/review5_off.png)}

        textarea{
            border-top:none;
            border-left:none;
            border-right:none;
            border-radius:0;
        }
        .sui-table-view{
            background-color:#FFFFFF;
        }

        .sui-table-view-cell{
            height:100px;
        }

        .sui-table-view-cell img{
            width:100%;
            background-color:#FFFFFF;
        }
    </style>
</head>
<body>
    <div class="content-box">
        <div class="review-ster">
            <div class="star-item">
                <div class="star-box">
                    <span>差</span><div class="review review1 off"></div>
                </div>
            </div>
            <div class="star-item">
                <div class="star-box">
                    <span>一般</span><div class="review review2 off"></div>
                </div>
            </div>
            <div class="star-item">
                <div class="star-box">
                    <span>满意</span><div class="review review3 off"></div>
                </div>
            </div>
            <div class="star-item">
                <div class="star-box">
                    <span>很满意</span><div class="review review4 off"></div>
                </div>
            </div>
            <div class="star-item">
                <div class="star-box">
                    <span>强烈推荐</span><div class="review review5 off"></div>
                </div>
            </div>
        </div>
        <textarea placeholder="内容" rows="4"></textarea>
        <div class="sui-table-view">
            <div class="sui-table-view-cell sui-view-cell-3"><img src="../../c-image/meinv.png"></div>
            <div class="sui-table-view-cell sui-view-cell-3"><img src="../../c-image/addImgBtn.png"></div>
        </div>
    </div>
</body>
<script type="text/javascript" src="../../c-script/api.js"></script>
<script type="text/javascript" src="../../c-script/jquery-2.1.3.min.js"></script>
<script type="text/javascript" src="../../c-script/public.js"></script>
<script type="text/javascript">

    var indexstar = 0 ;  //评论星级

    $(document).ready(function(){
        settingreview();
    };

    //设置评价的图片显示
    function  settingreview(){
        $('.star-item').on('click',function(){
            var index_ = $(this).index();
            $('.star-item').each(function(index,ele){
                var review =  $(ele).find('.review');
                review.removeClass('on');
                review.addClass('off');
                if(index_ == index){
                    review.removeClass('off');
                    review.addClass('on');
                    indexstar = index_ + 1;
                }
            });
        });
    }
</script>
</html>